<div class="container">
    <div class="row">
      <div class="col-md-12">
        <hr class="tall">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h1 class="mb-none"><strong></strong></h1>
        <p>.......</p>
      </div>
    </div>

    <div class="row">

      <ul class="products product-thumb-info-list" data-plugin-masonry>

        <li class="col-md-3 col-sm-6 col-xs-12 product"  *ngFor="let product of productList">
          <a *ngIf="product.flag == 'HOT'">
            <span class="onsale">热销</span>
          </a>
          <span class="product-thumb-info">
                      <a class="add-to-cart-product" (click)="addToCart(product.id)" href="javaScript:">
                        <span><i class="fa fa-shopping-cart"></i> 加入购物车</span>
                      </a>
                      <a (click)="productDetail(product.id)" href="javaScript:">
                        <span class="product-thumb-info-image">
                          <span class="product-thumb-info-act">
                            <span class="product-thumb-info-act-right"><em><i class="fa fa-search-plus"></i>查看详情</em></span>
                          </span>
                          <img alt="" class="img-responsive" src="{{product.mainImage}}">
                        </span>
                      </a>
                      <span class="product-thumb-info-content">
                        <a  >
                          <h5>{{product.subtitle}}</h5>
                          <span class="price">
                            <br>
                            <ins><span class="amount pull-right">￥{{product.price}}</span></ins>
                          </span>
                        </a>
                      </span>
                    </span>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 product" *ngIf="productList.length===0">
          <p>暂时没有您所搜索的产品</p>
        </li>
      </ul>

    </div>

  <div style="text-align: center"> <ul id="pageLimit"></ul> </div>

</div>
